<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Required meta tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          crossorigin="anonymous">
    <!-- 百度地图 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=PViQsMdlvUvxzpzShjmzW6qaAU2PexdH"></script>
    <title>Title</title>

</head>
<body>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5><a id="titleModal">在地图上单击选择酒店位置</a></h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="allmap" style="height:500px;">
                <!-- <div id="allmap"></div>-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="confirm();" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" >确定</button>
            </div>
        </div>
    </div>
</div>

<div class="col-md-4 col-md-offset-6">
    <h1>添加酒店</h1>
</div>

<div class="col-md-10 ">
    <form action="/system/hoteladd" method="post" enctype="multipart/form-data" class="form-horizontal" role="form">
        <div class="form-row">
            <div class="form-group col-md-3">
                <label for="hotelName">酒店名称：</label>
                <input type="text" class="form-control" name="hotelName" id="hotelName" placeholder="hotelName">
            </div>
            <div class="form-group col-md-3">
                <label>酒店类型:</label>
                <select name="type" class="form-control">
                    <option value="1">星级酒店</option>
                    <option value="2">快捷酒店</option>
                    <option value="3">商务酒店</option>
                    <option value="4">主题酒店</option>
                </select>
            </div>
            <div class="form-group col-md-3">
                <label for="keyword">关键词：</label>
                <input type="text" class="form-control" name="keyword" id="keyword" placeholder="keyword">
            </div>
        </div>

        <div class="form-row">
            <label for="image" class="col-md-2"> 酒店图片:</label>
            <div class="form-group col-md-4">
                <input class="form-control" type="file" id="image" name="image">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group col-md-2">
                <label>打开地图</label>
                <input type="button" class="form-control btn btn-info" data-toggle="modal" data-target="#myModal" id="createMap"
                       onclick="openMap();" value="选择酒店位置">
            </div>
            <div class="form-group col-md-4">
                <label for="cid">所在城市：</label>
                <select id="cid" name="cid" class="form-control">
                    <option>--请选择--</option>
                    <option th:each="city : ${cList.data}" th:text="${city.cityName}" th:value="${city.id}"></option>
                </select>
            </div>
            <div class="form-group col-md-4">
                <label for="district">行政区域：</label>
                <input type="text" class="form-control" name="district" id="district" placeholder="行政区域">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group col-md-6">
                <input class="form-control" type="text" id="address" name="address" placeholder="详细地址" /><br />
            </div>
            <div class="form-group col-md-2">
                <input type="text" class="form-control" id="lon" name="lon" placeholder="经度">
            </div>
            <div class="form-group col-md-2">
                <input type="text" class="form-control" id="lat" name="lat" placeholder="纬度">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group col-md-3">
                <label for="brand">品牌：</label>
                <input type="text" class="form-control" name="brand" id="brand" placeholder="brand">
            </div>
            <div class="form-group col-md-3">
                <label for="star">星级：</label>
                <input type="text" class="form-control" name="star" id="star" placeholder="star">
            </div>
            <div class="form-group col-md-3">
                <label for="openTime">开业时间：</label>
                <input type="date" class="form-control" name="openTime" id="openTime">
            </div>

        </div>

        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="hotelInfo"> 酒店信息：</label>
                <textarea class="form-control" rows="5" id="hotelInfo" name="hotelInfo"></textarea>
            </div>
        </div>

        <button type="submit" class="btn btn-danger">提交</button>
    </form>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>

<script type="text/javascript">
    function openMap() {
        $("#titleModal").text("在地图上单击选择酒店位置");
        /*initMap();*/
        //延时0.5s打开地图解决地图偏移问题
        setTimeout(function () {
            // 百度地图API功能
            var map = new BMap.Map("allmap");

            //获得当前选择的城市名称
            var cityName = $("#cid option:selected").html();
            console.log("cname"+cityName);
            map.centerAndZoom(cityName, 12);
            map.enableScrollWheelZoom(true);
            //逆地址解析的对象
            var geoc = new BMap.Geocoder();

            //设置点击点击
            map.addEventListener("click", function(e) {
                //获得点击的坐标点位置
                var point = e.point;
                $("#lat").val(point.lat);
                $("#lon").val(point.lng);

                console.log(point.lat+","+point.lng);
                //进行逆地址解析
                geoc.getLocation(point, function(rs) {
                    var addComp = rs.addressComponents;
                    console.log(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
                    $("#district").val(addComp.district);
                    $("#address").val(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
                    addr = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                    $("#titleModal").text(addr);
                });

                //清空标注物
                map.clearOverlays();
                //设置标注物
                var marker = new BMap.Marker(point); // 创建标注
                map.addOverlay(marker); // 将标注添加到地图中
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            });
        },1000 * 0.5);
    }

    var addr = null;
    //清空地址栏内容
    function confirm() {
        $("#lat").val("");
        $("#lon").val("");
        $("#district").val("");
        $("#address").val("");
    }
</script>

</body>

</html>
